<template>
	<view class="container">
		<view class="search-bar">
			<view class="sousuo">
				<input type="text" placeholder="输入订单号进行搜索" class="search-input" />
				<image src="/static/搜索.svg" class="search-icon" mode="aspectFit" />
				<view class="search-button">搜索</view>
			</view>

		</view>

		<view class="order-list">
			<view class="order-total">
				<view>共{{ orders.length }}条订单记录</view>
				<view><uni-data-select v-model="value" :localdata="range" @change="change">
					</uni-data-select>
				</view>
			</view>

			<view class="order-item" v-for="(order, index) in orders" :key="index" v-show="order.status==value">
				<view class="order-header">
					<text class="order-id">订单号：{{ order.id }}</text>
					<text class="order-amount">￥{{ order.amount }}元</text>
				</view>

				<view class="order-info">
					<view class="user">下单用户：{{ order.user }}</view>
					<view class="time">预约时间：{{ order.appointmentTime }}</view>
					<view class="service">服务项目：{{ order.service }}</view>
					<view class="order-status" :style="{ color: order.statusColor }">订单状态: {{ order.status }}</view>
				</view>
				<view class="order-footer">
					<text class="order-time">下单时间：{{ order.orderTime }}</text>
					<button class="detail-button" @click="toOrderDetail">查看详情</button>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const value = ref(0);

	const range = ref([{
			value: 0,
			text: "待服务"
		},
		{
			value: 1,
			text: "已完成"
		}
	]);

	const orders = ref([{
			id: "2021010831213",
			amount: 2000.00,
			user: "张三丰",
			appointmentTime: "2022-10-10 11:00",
			service: "宝马X5加装轮毂、清洁车辆、汽车美容",
			orderTime: "2022-10-10 11:09",
			status: 0,
			statusColor: "#007aff",
		},
		{
			id: "2021010831213",
			amount: 2000.00,
			user: "张三丰",
			appointmentTime: "2022-10-10 11:00",
			service: "宝马X5加装轮毂、清洁车辆、汽车美容",
			orderTime: "2022-10-10 11:09",
			status: 1,
			statusColor: "#999999",
		},
		{
			id: "2021010831213",
			amount: 2000.00,
			user: "张三丰",
			appointmentTime: "2022-10-10 11:00",
			service: "宝马X5加装轮毂、清洁车辆、汽车美容",
			orderTime: "2022-10-10 11:09",
			status: 0,
			statusColor: "#007aff",
		},
	]);

	const toOrderDetail = (id) => {
		uni.navigateTo({
			url: '/pages/index/orderManagement/details/details'
		});
	}
</script>
<style scoped>
	.container {
		background-color: #f5f5f5;
	}


	.search-bar {
		display: flex;
		padding: 30rpx 0;
		align-items: center;
		/* margin-bottom: 20rpx; */
	}

	.sousuo {
		display: flex;
		position: relative;
		align-items: center;
		gap: 20rpx;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}

	.search-input {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		width: 580rpx;
		background-color: #fff;
		height: 46rpx;
		border-radius: 16rpx;
	}

	/* 搜索图标样式 */
	.search-icon {
		position: absolute;
		right: 160rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 38rpx;
		height: 38rpx;
	}


	.search-button {
		font-size: 30rpx;
		font-weight: 700;
		color: blue;
		height: 100rpx;
		width: 100rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}

	.order-list {
		gap: 20rpx;
		background-color: white;
	}


	.order-total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 20rpx;
		font-weight: 550;
		font-size: 30rpx;
	}

	.order-item {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		padding-bottom: 16rpx;
	}

	.order-id {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.order-amount {
		font-size: 32rpx;
		color: #ff5722;
		font-weight: bold;
		padding: 0 20rpx;
	}

	.order-status {
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.order-info {
		margin-bottom: 10rpx;
		color: #333;
		font-weight: 550;
	}

	.user {
		font-size: 28rpx;
		color: #666666;
		margin-top: 10rpx;
	}

	.time {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.service {
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.order-time {
		font-size: 28rpx;
		color: #999999;
	}

	.detail-button {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		background-color: #007aff;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		outline: none;
		width: 180rpx;
		height: 60rpx;
	}
</style>